<!-- prettier-ignore -->
<!-- 编写一个vue组件，组件内部使用插槽接收外部内容，v-model双向绑定，实现折叠展开的功能 -->
  <template>
    <div>
      <button @click="buttonClick">{{collapsed ? '折叠' : '展开'}}</button>
      <div v-show="collapsed">
        <slot></slot>
      </div>
    </div>
  </template>

  <script>
  export default {
    name: "CollapseExpand.vue",

    model:{
      prop: 'collapsed',
      event: 'change'
    },

    props:{
      collapsed:{
        type: Boolean,
        default: false
      }
    },

    data() {
      return {}
    },
    methods: {
      buttonClick(){
        this.$emit('change',!this.collapsed)
      }
    }
  }
  </script>
